<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <!-- 引用开发版 -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
    vue监视数据的原理：
        1.vue会监视data中所有层次的数据。

        2.如何监测对象中的数据呢？
            通过setter实现监视，且要在new Vue时就传入要检测的数据。
            （1）对象中后追加的属性，Vue默认不做响应式处理；
            （2）如需给后追加的属性做响应式，请使用如下API:
                Vue.set(targetObject, propertyName/index, value)或
                vm.$set(targetObject, propertyName/index, value)
        
        3.如何监测数组中的数据？
            通过包裹数组更新元素的方法实现，本质就是做了两件事：
            （1）调用原生对应的方法对数组进行更新；
            （2）重新解析模板，进而更新页面

        4.在Vue修改数组中的某一元素一定要用如下方法：
            （1）使用push() | pop() | shift() | unshift() | splice() | sort() | reverse()
            （2）Vue.set()或vm.$set()

        特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据（vm._datas）对象添加属性！！！
     -->
    <!-- 准备一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <ul>
            <!-- in可以换成of -->
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}-{{index}}
            </li>
        </ul>
        <br/><br/>
        <!-- 遍历对象 -->
        <ul>
            <li v-for="(value,key) in car" :key="key">
                {{key}}-{{value}}
            </li>
        </ul>
        <!-- 遍历字符串 -->
        <br/><br/>
        <ul>
            <li v-for="(char,index) in str" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>
         <!-- 遍历指定的次数 -->
         <br/><br/>
         <ul>
             <li v-for="(value,index) in 6" :key="index">
                 {{value}}-{{index}}
             </li>
         </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip=false

        const vm = new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'0001', name:'张三',age:18},
                    {id:'0002', name:'李四',age:19},
                    {id:'0003', name:'王五',age:20}
                ],
                car:{
                    name:'奥迪A8',
                    price:'70W',
                    color:'黑色'
                },
                str:'hello'
            }
        })
    </script>
</body>
</html